<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      unique-opened
      router
    >
      <el-submenu v-for="(menu,midx) in items" :index="midx + ''" :key="midx">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.title}}</span>
        </template>
        <el-menu-item v-for="submenu in menu.subs" :key="submenu.index" :index="submenu.index">
          <span>{{submenu.title}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import bus from "./bus.js";
import menuConfig from "@/config/menuConfig";

export default {
  data() {
    return {
      collapse: false,
      items: []
    };
  },
  computed: {
    onRoutes() {
      return this.$route.meta.name;
    }
  },
  components: {},
  methods: {},
  created() {
    // 通过 Event Bus 来进行组件间的通信
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
    // 动态显示需要显示的菜单
    const storeMenu = this.$store.state.menu.reduce((prev, current) => {
      prev.push(current.path);
      return prev;
    }, []);

    const newMenuConfig = [];
    for (var i = 0; i < menuConfig.length; i++) {
      let subs = [];
      for (var j = 0; j < menuConfig[i].subs.length; j++) {
        if (storeMenu.indexOf(menuConfig[i].subs[j].index) > -1) {
          subs.push(menuConfig[i].subs[j]);
        }
      }
      if (subs.length > 0) {
        newMenuConfig.push({ ...menuConfig[i], subs });
      }
    }
    // console.log(newMenuConfig)
    this.items = newMenuConfig
  }
};
</script>

<style lang="less" scoped type="text/less">
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
/* 隐藏滚动条 */
.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar > ul {
  height: 100%;
}
</style>